<template>
  <form @submit.prevent="() => { return false }" class="article-info">
    <div class="game-con-info">
      <div class="info-detail-mask" @click="handleClose" @mouseover="onMaskOver" @mouseleave="onMaskLeave"></div>
      <div class="game-info">
        <div class="fx-top-bar" :class="isFixed ? 'is-fixed' : ''">
          <!-- <a class="close-modal-page" @click="handleClose"></a> -->
          <el-popover popper-class="gm-info-pop" placement="bottom" trigger="hover">
              <i class="sm-tip" slot-content>关闭</i>
              <a slot="reference" class="close-modal-page" @click="handleClose"></a>
          </el-popover>
          <div class="back-area">
            <a class="top-back" @click="handleClose"></a><span v-if="isFixed">{{ info.title }}</span><template  v-if="isFixed"><img loading="lazy" class="u-m-tag" v-for="tag in info.tagsList" :src="tag.image" alt=""></template>
          </div>
          <div class="u-row" v-if="isFixed">
            <div class="user">
              <a class="img-box" :href="'/user/'+info.member.id" target="_blank">
                <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 40, name: info.member.userName }" />
              </a>
              <a class="name" :href="'/user/'+info.member.id" target="_blank">{{ info.member.userName }}</a>
              <div class="tags"></div>
            </div>
            <div class="funs">
              <a class="private-to" v-if="userId != id" @click="handlePrivateTo">私信</a>
              <a class="follow-to" :class="{'active':info.isSubscribe>0}" @click="handleFollow">{{ info.isSubscribe > 0 ? '已关注' : '关注' }}</a>
            </div>
          </div>
        </div>
        <Article :id="id" :model="info" v-if="isloaded" ref="articlePage" @pagescroll="pageScroll" />
      </div>
    </div>

    <a-modal v-model="showNotice" destroyOnClose centered :footer="null" :closable="false" width="860px">
      <Notice @close="showNotice = false" v-if="showNotice" :privatemember="privatemember" />
    </a-modal>
  </form>
</template>

<script>

import Notice from '@/components/Notice'
import Article from '@/components/info/article'
import api from '@/api/api'
export default {
  components: { Article, Notice },
  data() {
    return {
      userId: '',
      isloaded: false,
      isFixed: false,
      privatemember: {},
      showNotice: false,
      info: {
        tagsList:[],
        member: {tagsList:[]}
      }
    }
  },
  props: ['id'],
  methods: {
    onMaskOver(e){
        $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.25)','backdrop-filter':'saturate(180%) blur(10px)'})
    },
    onMaskLeave(e){
        $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.6)','backdrop-filter':'saturate(180%) blur(16px)'})
    },
    pageScroll(_top) {
      this.isFixed = _top > 250;
    },
    handlePrivateTo() {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      this.privatemember = { sendName: this.info.member.userName, ...this.info.member };
      this.showNotice = true;
    },
    async handleFollow() {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      if (this.info.isSubscribe > 0) {
        let res = await api.cancelFollowTo(this.info.member.id);
        if (res.code == 0) {
          this.info.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(this.info.member.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          this.info.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    handleClose() {
      this.$emit('close')
    },
    handleTagPrev() {
      this.gmTagSwiper.slidePrev()
    },
    handleTagNext() {
      this.gmTagSwiper.slideNext()
    },
    handledxVdSwiperPrev() {
      this.gmVideoSwiper.slidePrev();
    },
    handledxVdSwiperNext() {
      this.gmVideoSwiper.slideNext();
    }
  },
  async mounted() {
    let res = await api.getArticleById(this.id);
    this.info = res.data;
    this.isloaded = true;
  }
}
</script>

<style scoped lang="less">
/* 定义淡出动画 */
@keyframes fadeIn {
  from { /* 动画开始时 */
    opacity:0;
  }
  to { /* 动画结束时 */
    opacity:1;
  }
}
.article-info {
  .info-detail-mask {
    // position: fixed;
    // left: 0px;
    // right: 0px;
    // top: 0px;
    // background: rgba(0, 0, 0, 0.7);
    // z-index: 101;
    // width: 100%;
    // height: 100%;
  }

  .info-right-bar {
    position: fixed;
    right: 14%;
    top: 30%;
    width: 70px;
    z-index: 113;
    // border:1px solid red;
    display: flex;
    flex-wrap: wrap;

    >span {
      width: 50px;
      height: 50px;
      position: relative;
      cursor: pointer;

      i {
        font-style: normal;
        font-size: 12px;
        text-align: center;
        position: absolute;
      }

      .num {
        background: #232323;
        line-height: 17px;
        border-radius: 9px;
        border: 1px solid #010101;
        padding: 0px 2px;
        font-size: 12px;
        position: absolute;
        top: 0px;
        right: -5px;
        font-style: normal;
      }

      .text {
        top: 50px;
        width: 100%;
        margin-top: 10px;
      }
    }

    .user {
      img {
        border-radius: 50px;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .follow-btn {
        width: 24px;
        height: 24px;
        background: url('../assets/pro/gameInfoRightBar/follow.svg') no-repeat;
        position: absolute;
        bottom: 0px;
        right: -8px;
      }
    }

    .support-btn {
      background: url('../assets/pro/gameInfoRightBar/call.png') no-repeat;
      background-size: cover;
      margin-top: 40px;
    }

    .comment-btn {
      background: url('../assets/pro/gameInfoRightBar/comment.svg') no-repeat;
      background-size: cover;
      margin-top: 58px;
    }

    .zan-btn {
      background: url('../assets/pro/gameInfoRightBar/zan.svg') no-repeat;
      background-size: cover;
      margin-top: 58px;
    }

    .fav-btn {
      background: url('../assets/pro/gameInfoRightBar/fav.svg') no-repeat;
      background-size: cover;
      margin-top: 58px;
    }

    .take-top {
      background: url('../assets/pro/gameInfoRightBar/take_top.svg') no-repeat;
      background-size: cover;
      cursor: pointer;
      margin-top: 58px;

      &:hover {
        background: url('../assets/pro/gameInfoRightBar/take_top_active.svg') no-repeat;
        background-size: cover;
      }
    }
  }

  .game-con-info {
    
    animation: fadeIn .3s ease-in-out forwards;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 112;
    width: 100%;
    // overflow-y: auto;
    height: 100%;

    .comp-article-page {
      // border:1px solid red;
      height: calc(-101px + 100vh);
      overflow-y: auto;
    }

    .game-info {
      // max-width: 1920px;
      margin: 0 auto;
      margin-top: 45px;
      background: #000;
      position: relative;
      z-index: 102;
      transition:margin 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      .back-area {
        position: absolute;
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 30px;
        height: 100%;
        padding-top:30px;

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .top-back {
        width: 44px;
        height: 44px;
        background: url('../assets/pro/gminfo_topback.svg') no-repeat;
        background-size: cover;
        z-index: 102;
        transition: .2s all linear;
        margin-right: 16px;

        &:hover {
          background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
          background-size: cover;
        }
      }

      .fx-top-bar {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        position: sticky;
        top: 0px;
        z-index: 102;
        right: 19px;

        transition: .3s all linear;
        animation:opacity 1s ease-in;
        height: 56px;

        .close-modal-page {
          width:25px;
          height:44px;
          // margin-top: -33px;
          background: url('../assets/pro/close_modal_page.svg') no-repeat;
          background-size: 20px;
          transition: .1s all linear;
          right: 19px;
          top:0px;
          position: fixed;
          z-index:1;
          background-position: center;
          &:hover {
            transform: rotate(180deg);
          }

          &:hover {
            transform: rotate(180deg);
          }
        }

        &.is-fixed {
          background: #181818;

          .top-back {
            top: 6px;
          }
          .back-area{
            padding-top:0px;
          }
        }
      }


      .u-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 100px;
        position: absolute;
        top: 13px;

        .user {
          display: flex;
          align-items: center;

          .img-box {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            overflow: hidden;
            margin-right: 15px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            &:hover{
              img{
                transform: scale(1.08);
              }
            }
          }

          .name {
            font-size: 16px;
            font-weight: 500;
            margin-right: 20px;
            &:hover{
              text-decoration: underline;
              color:#11CCB1;
            }
          }
        }

        .funs {
          display: flex;
          font-size: 14px;
          align-items: center;
          text-align: center;

          .private-to {
            border: 1px solid #484848;
            border-radius: 8px;
            line-height: 30px;
            width: 70px;
          }

          .follow-to {
            margin-left: 10px;
            border-radius: 8px;
            line-height: 30px;
            width: 70px;
            color: #fff;
            transition:.1s all linear;
            &:not(.active){
              border: 1px solid #11CCB1;
              background: #11CCB1;
              :hover {
                background: #0fab94;
                border-color:#0fab94;
              }
            }
            &.active{
              border: 1px solid #484848;
            }
          }
        }
      }

      .article-top {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;

        .info-title {
          font-size: 40px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 56px;
          text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.76);
        }

        .other {
          color: #969696;
          font-size: 12px;
          line-height: 17px;
          margin: 12px 0px 40px 0px;
        }

        .u-row {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .user {
            display: flex;
            align-items: center;

            .img-box {
              width: 40px;
              height: 40px;
              border-radius: 40px;
              overflow: hidden;
              margin-right: 15px;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .name {
              font-size: 16px;
              font-weight: 500;
            }
          }

          .funs {
            display: flex;
            font-size: 14px;
            align-items: center;

            .private-to {
              border: 1px solid #fff;
              border-radius: 8px;
              line-height: 34px;
              width: 70px;
            }

            .follow-to {
              border: 1px solid #11CCB1;
              margin-left: 10px;
              border-radius: 8px;
              line-height: 34px;
              width: 70px;
              background: #11CCB1;
              color: #fff;
            }
          }
        }

        .article-con {
          margin-top: 40px;
          font-size: 14px;
          // line-height: 26px;
          text-align: left;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }


      .zan-row {
        text-align: center;
        margin-top: 119px;

        .zan-btn {
          width: 100px;
          height: 100px;
          border-radius: 100px;
          background-color: #181717;
          display: block;
          margin: 0 auto;
          background-image: url('../assets/pro/gm_info_big_zan.svg');
          background-position: 50% 40%;
          background-repeat: no-repeat;

          i {
            font-style: normal;
            font-size: 14px;
            margin-top: 65px;
            display: inline-block;
          }

          &.active {
            background-image: url('../assets/pro/gm_info_big_zaned.svg');
            background-position: 50% 40%;
            background-repeat: no-repeat;
          }
        }
      }

      .new-zans {
        text-align: center;
        margin: 42px 0px 25px 0px;

        .text {
          position: relative;

          &:before {
            content: '';
            height: 1px;
            width: 118px;
            background: #343434;
            position: absolute;
            left: -122px;
            top: 8px;
          }

          &:after {
            content: '';
            height: 1px;
            width: 118px;
            background: #343434;
            position: absolute;
            right: -122px;
            top: 8px;
          }
        }
      }

      .new-zan-uimgs {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;

        .item {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          overflow: hidden;
          margin-right: 20px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .tj-box {
      max-width: 1566px;
      margin: 0 auto;

      .panel-tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .tit-text {
          font-size: 26px;
          font-weight: 500;
          line-height: 37px;
        }

        .other-ops {
          font-size: 12px;
          color: #6E6D7A;
          line-height: 26px;
          display: flex;

          .jubao-btn {
            background: url('../assets/pro/workinfo/gray_report_icon.svg') no-repeat;
            background-position: left center;
            background-size: 18px 18px;
            padding-left: 23px;
          }

          .share-btn {
            border: 1px solid #323232;
            border-radius: 6px;
            width: 70px;
            text-align: center;
            margin: 0px 20px;
            background: url('../assets/pro/workinfo/gray_share_icon.svg') no-repeat;
            background-position: 10px center;
            background-size: 18px 18px;
            padding-left: 23px;
          }

          .fav-btn {
            border: 1px solid #323232;
            border-radius: 6px;
            width: 70px;
            text-align: center;
            background: url('../assets/pro/workinfo/gray_star_icon.svg') no-repeat;
            background-position: 10px center;
            background-size: 18px 18px;
            padding-left: 23px;
          }
        }
      }

      .xg-games {
        display: flex;
        flex-wrap: wrap;

        .bdl-data-item {
          width: 297px;
          height: 223px;
          border-radius: 16px;
          overflow: hidden;
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;

          &:nth-child(5n) {
            margin-right: 0px;
          }

          .left-icos {
            position: absolute;
            left: 10px;
            top: 10px;
            display: flex;
            align-items: center;

            img {
              &:first-child {
                margin-right: 10px;
              }
            }
          }

          .right-icos {
            position: absolute;
            right: 10px;
            top: 10px;
            display: flex;
            align-items: center;

            img {
              &:first-child {
                // margin-right:10px;
              }
            }
          }

          >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .basic-u-info {
            position: absolute;
            bottom: 11px;
            left: 13px;
            display: flex;
            align-items: center;
            right: 12px;
            justify-content: space-between;
            z-index: 1;

            .user {
              display: flex;
              align-items: center;

              img {
                height: 26px;
                width: 26px;
                border-radius: 26px;
                object-fit: cover;
                margin-right: 9px;
              }

              .name {
                color: #fff;
                font-size: 14px;
                font-weight: 500;
              }
            }

            .znum {
              font-size: 12px;
              background: url('../assets/pro/dianzanicon.svg') no-repeat;
              padding-left: 26px;
              color: #fff;
            }

            .snum {
              font-size: 12px;
              background: url('../assets/pro/yuedu_icon.svg') no-repeat;
              padding-left: 26px;
              color: #fff;
            }
          }

          .basic-info {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 1;

            .title {
              font-size: 16px;
              font-weight: 500;
              margin-bottom: 3px;
            }

            .bot-desc {
              font-size: 12px;
              color: #fff;
              display: flex;

              .uname {
                margin-left: 32px;
              }
            }
          }

          .con-mask {
            height: 129px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
          }

          .hid-el {
            // display: none;
            opacity: 0;
          }

          &:hover {
            border: 2px solid #11CCB1;

            // width:293px;height:219px;
            .hid-el {
              // display: inline-block;
              opacity: 1;

              transition: .1s all linear;
            }
          }
        }
      }

      .tj-panel {
        margin-top: 30px;

        .tit {
          font-size: 26px;
          font-weight: 500;
          line-height: 37px;
          margin-bottom: 20px;
        }

        .tags {
          line-height: 38px;
          display: flex;
          align-items: center;

          .tag {
            background: #2F313D;
            color: #fff;
            padding: 0px 22px;
            border-radius: 38px;
            margin-right: 20px;
          }
        }
      }
    }


    // .comment-area {
    //   background: #171717;
    //   padding-top: 39px;
    //   padding-bottom: 44px;
    //   margin-top: 40px;

    //   .comment-box {
    //     max-width: 636px;
    //     margin: 0 auto;

    //     .tit-num {
    //       display: flex;
    //       align-items: center;
    //       font-size: 18px;
    //       line-height: 25px;
    //       font-weight: 500;
    //       margin-bottom: 8px;

    //       i {
    //         font-style: normal;
    //         margin-left: 12px;
    //         font-size: 12px;
    //         color: #EAEAEA;
    //         font-weight: normal;
    //       }
    //     }

    //     .comment-inp {
    //       height: 121px;
    //       border-radius: 16px;
    //       overflow: hidden;

    //       textarea {
    //         background: #242327;
    //         resize: none;
    //         width: 100%;
    //         height: 100%;
    //         color: #fff;
    //         font-size: 14px;
    //         line-height: 20px;
    //         border: none;
    //         padding: 11px 14px;
    //       }
    //     }

    //     .send-box {
    //       display: flex;
    //       align-items: center;
    //       justify-content: space-between;
    //       margin-top: 12px;
    //       margin-bottom: 24px;
    //       font-size: 14px;
    //       line-height: 28px;

    //       .add-face {
    //         background: url('../assets/pro/add_face.svg') no-repeat;
    //         background-position: left center;
    //         padding-left: 26px;
    //       }

    //       .send-btn {
    //         background: #11CCB1;
    //         color: #fff;
    //         text-align: center;
    //         width: 56px;
    //         user-select: none;
    //         border-radius: 4px;
    //       }
    //     }

    //     .comments {
    //       .comment-data-item {
    //         display: flex;
    //         align-items: flex-start;
    //         margin-bottom: 20px;

    //         .uavatar {
    //           width: 34px;
    //           height: 34px;
    //           min-width: 34px;
    //           border-radius: 34px;
    //           overflow: hidden;
    //           margin-right: 31px;

    //           img {
    //             width: 100%;
    //             height: 100%;
    //             object-fit: cover;
    //           }
    //         }

    //         .r-con {
    //           background: #202020;
    //           border-radius: 8px;
    //           padding: 12px 16px;
    //           width: 100%;

    //           .name {
    //             color: #BBBBBB;
    //             font-size: 14px;
    //             line-height: 20px;
    //           }

    //           .con-html {
    //             margin-top: 6px;
    //             margin-bottom: 16px;
    //             font-size: 16px;
    //           }

    //           .bot {
    //             display: flex;
    //             align-items: center;
    //             justify-content: space-between;

    //             .time {
    //               font-size: 12px;
    //               color: #6E6D7A;
    //             }

    //             .funs {
    //               display: flex;
    //               align-items: center;

    //               a {
    //                 &:first-child {
    //                   color: #BBBBBB;
    //                   font-size: 14px;
    //                 }
    //               }

    //               .cmt-zan {
    //                 color: #BBBBBB;
    //                 font-size: 12px;
    //                 background: url('../assets/pro/dianzanicon.svg') no-repeat;
    //                 margin-left: 20px;
    //                 padding-left: 25px;
    //               }
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>